<template>
	<el-tabs
		v-model="store.tabsIndex"
		type="card"
		class="demo-tabs"
		closable
		@tab-remove="removeTab"
		@tab-change="handleChange"
	>
		<el-tab-pane
			v-for="item in store.tabsList"
			:key="item.title"
			:label="item.title"
			:name="item.path"
		>
		</el-tab-pane>
	</el-tabs>
</template>

<script setup lang="ts">
import router from "../router";
import { useTabsStore } from "../store/tabs";
const store = useTabsStore();

//移出tabs
const removeTab = (TabPaneName: string) => {
	const index = store.tabsList.findIndex((tab) => tab.path === TabPaneName);
	if (index > 0) {
		store.tabsList.splice(index, 1);
		if (store.tabsList.length === 1) {
			store.tabsIndex = store.tabsList[0].path;
		} else if (index === store.tabsList.length) {
			store.tabsIndex = store.tabsList[index - 1].path;
		} else if (store.tabsIndex !== TabPaneName) {
			store.tabsIndex = store.tabsIndex;
		} else {
			store.tabsIndex = store.tabsList[index].path;
		}
	}
};

//改变tabs
const handleChange = (TabPaneName: string) => {
	router.push(TabPaneName);
};
</script>

<style scoped lang="scss">
:deep(.el-tabs__header) {
	padding-left: 20px;
	box-sizing: border-box;
	background: linear-gradient(#a0a9b6, #b4bcc8);
	border: 0;
	margin: 0;
	height: 56px;
	display: flex;
	align-items: end;
	.el-tabs__nav {
		border: 0;
		.el-tabs__item {
			border: 0;
			margin-right: 10px;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			margin-bottom: 1px;
		}
		.el-tabs__item.is-top.is-closable {
			background: linear-gradient(#8b949f, #959ea8);
			color: #fff;
		}
		.el-tabs__item.is-top.is-active.is-closable {
			background: #f5f7fe !important;
			color: #404141;
		}
	}
}
</style>
